<template>
  <CollapseContainer class="w-full h-32 mt-5 bg-white rounded-md" title="模态消息">
    <a-tooltip class="ml-5 mt-5" title="提示文字..."> 正上方提示 </a-tooltip>

    <a-tooltip class="ml-5 mt-5" placement="bottom">
      <template #title>下方提示</template>
      slot 方式
    </a-tooltip>

    <a-tooltip class="ml-5 mt-5" title="左侧边缘对齐">
      <a-button>Button, 默认箭头对齐中心</a-button>
    </a-tooltip>

    <a-tooltip class="ml-5 mt-5" placement="topLeft" title="左侧边缘对齐">
      <a-button>Button, 箭头对齐左侧</a-button>
    </a-tooltip>

    <a-tooltip class="ml-5 mt-5" placement="topLeft" arrow-point-at-center title="中心左侧边缘对齐">
      <a-button>Button, 中心分开，箭头对齐左侧</a-button>
    </a-tooltip>

    <a-tooltip class="ml-5 mt-5" title="左侧边缘对齐" color="green">
      <a-button>自定义颜色</a-button>
    </a-tooltip>

    <div class="w-full bg-white rounded-md">
      <ol class="ml-5 mt-5 pb-3">
        <li class="mt-2">vben 未进行封装，antd 原生方式 </li>
        <li class="mt-2">
          <a href="https://www.antdv.com/components/tooltip-cn">ant message 官方文档</a>
        </li>
      </ol>
    </div>

    <CollapseContainer class="w-full bg-white rounded-md mt-5" title="源码">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>
  </CollapseContainer>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';

  // 导入 Tooltip
  import { Tooltip as aTooltip, Button as aButton } from 'ant-design-vue';
</script>

<script lang="ts">
  function getDoc() {
    return `

\`\`\`html
<a-tooltip class="ml-5 mt-5" title="提示文字..."> 正上方提示 </a-tooltip>

<a-tooltip class="ml-5 mt-5" placement="bottom">
  <template #title>下方提示</template>
  slot 方式
</a-tooltip>

<a-tooltip class="ml-5 mt-5" title="左侧边缘对齐">
  <a-button>Button, 默认箭头对齐中心</a-button>
</a-tooltip>

<a-tooltip class="ml-5 mt-5" placement="topLeft" title="左侧边缘对齐">
  <a-button>Button, 箭头对齐左侧</a-button>
</a-tooltip>

<a-tooltip class="ml-5 mt-5" placement="topLeft" arrow-point-at-center title="中心左侧边缘对齐">
  <a-button>Button, 中心分开，箭头对齐左侧</a-button>
</a-tooltip>

<a-tooltip class="ml-5 mt-5" title="左侧边缘对齐" color="green">
  <a-button>自定义颜色</a-button>
</a-tooltip>
\`\`\`

\`\`\`typescript
// Tooltip
import { Tooltip as aTooltip, Button as aButton } from 'ant-design-vue';
\`\`\`

`;
  }
</script>
